<template >
	<div style="height:100%;width:100%;" id="the_dashboard">
		<md-toolbar class="md-dense" md-elevation="0">
			<span style="width:200px;display:inline-flex;">
			<md-field >
				<label>{{getLangText(label.templateTitle)}}</label>
				<md-input v-model="chartTemplate.title"></md-input>
			</md-field>
			</span>			

			<span style="display:inline-flex;align-items:center;margin-left:16px;" v-if="chartTemplate.template_id">ID:{{chartTemplate.template_id}}</span>

			<span class="md-toolbar-section-end" style="display:inline-flex;align-items:center;">
				<span style="display:inline-flex;align-items:center" @click="isAddCard=true">
					<md-button class="md-icon-button">
						<i class="iconfont iconadd"></i>
					</md-button>
					{{getLangText(label.addCard)}}
				</span>
				<span
					style="display:inline-flex;align-items:center;margin-left:16px;"
					@click="fullScreen"
					@keydown.esc="fullScreen"
				>
					<md-button class="md-icon-button">
						<i :class="['iconfont', isFullscreen?'icontuichuquanping':'iconquanping']"></i>
					</md-button>
					{{getLangText(isFullscreen?label.exitFullscreen:label.fullScreen)}}
				</span>
				<span
					style="display:inline-flex;align-items:center;margin-left:16px;"
					@click="isBgStyle=true"
				>
					<md-button class="md-icon-button">
						<i class="iconfont iconbeijingyanse"></i>
					</md-button>
					{{getLangText(label.bgStyle)}}
				</span>
				<span style="display:inline-flex;align-items:center;margin-left:16px;" @click="saveBoard" v-if="!chartTemplate.template_id">
					<md-button class="md-icon-button">
						<i class="iconfont iconsave"></i>
					</md-button>
					{{getLangText(label.save)}}
				</span>
				
				<span
					@click="newTemplate"
					style="display: inline-flex;align-items: center;margin-left:16px;"
					v-if="chartTemplate.template_id"
				>
					<md-button class="md-icon-button">
						<i class="iconfont iconplus-creat"></i>
					</md-button>
					{{getLangText(label.create)}}
				</span>
				<span
					style="display:inline-flex;align-items:center;margin-left:16px;"
					@click="refreshBoard"
					v-if="chartTemplate.template_id"
				>
					<md-button class="md-icon-button">
						<i class="iconfont iconrefresh"></i>
					</md-button>
					{{getLangText(label.refresh)}}
				</span>

				<span
					style="display:inline-flex;align-items:center;margin-left:16px;"
					@click="viewBoard"
					v-if="chartTemplate.template_id"
				>
					<md-button class="md-icon-button">
						<i class="iconfont iconview"></i>
					</md-button>
					{{getLangText(label.view)}}
				</span>

				<span
					style="display:inline-flex;align-items:center;margin-left:16px;"
					@click="updateBoard"
					v-if="chartTemplate.template_id"
				>
					<md-button class="md-icon-button">
						<i class="iconfont iconupdate"></i>
					</md-button>
					{{getLangText(label.update)}}
				</span>
				<span style="display:inline-flex;align-items:center;margin-left:16px;" @click="exportBoard">
					<md-button class="md-icon-button">
						<i class="iconfont iconexport"></i>
					</md-button>
					{{getLangText(label.export)}}
				</span>
			</span>
		</md-toolbar>
		
		<div class="md-dense-body" id="dashboard_body">
			<div class="dash-board " id="dashboard_grid" :style="bgStyle.result">
			</div>
		</div>

		<div
			id="dashboard_chart_card_idx_"
			class="chart-card dashboard"
			style="display:none;"
			data-idx="_idx_"
		>
			<div class="chart-card-header">
				<span>_title_</span>
				<span>
					<i class="iconfont iconrefresh"></i>
					<i class="iconfont iconyanse"></i>
					<i class="iconfont iconPencil"></i>
					<i class="iconfont iconshanchu"></i>
				</span>
			</div>
			<div id="dashboard_chart_idx_" class="chart-card-content"></div>
		</div>

		<md-dialog-confirm
			:md-active.sync="showDel"
			:md-title="getLangText(label.delTip)"
			:md-content="getLangText(label.chart)+selectId"
			:md-confirm-text="getLangText(label.ok)"
			:md-cancel-text="getLangText(label.no)"
			@md-confirm="onDelConfirm"
		/>
		<bg-dialog :lang-type="langType" :is-show.sync="isBgStyle" :bg="bgStyle" @dialog-ok="createBg"></bg-dialog>
		<search-chart-dialog :lang-type="langType" :is-show.sync="isAddCard" @dialog-ok="doAddCard"></search-chart-dialog>
		<card-style-dialog
			:lang-type="langType"
			:option="cardStyle"
			:is-show.sync="isCardStyle"
			@dialog-ok="setCardStyle"
		></card-style-dialog>

		<md-dialog-alert :md-active.sync="isAlert" :md-content="alertTip" md-confirm-text="OK" />
	</div>
</template>
<script src="@/components/js/dashBoard.js">
</script>
<style lang="scss" scoped>
	.md-field{
		margin:0;
	}
</style>

